import React from 'react';
import SingerList from '../components/singerItem.js';
export default class Singer extends React.Component{
    render(){
       
        return(
            <div className="singerPage">
                <div className="banner">
                    <div className="middle">
                        <h2>万千歌手 近在眼前</h2>
                        <div className="you_like">
                            <p>登录查看你的关注歌手</p>
                        </div>
                        <a href="http://www.smilening.online/newqqmusic/html/login.html" className="login">立即登录</a>
                    </div>
                </div>
                <div className="main">
                    <div className="singer">
                        <div className="singer_area">
                            <a href="javascript:;" className="singer_item singer_first">全部</a>
                            <a href="javascript:;" className="singer_item">华语男</a>
                            <a href="javascript:;" className="singer_item">华语女</a>
                            <a href="javascript:;" className="singer_item">华语组合</a>
                            <a href="javascript:;" className="singer_item">韩国男</a>
                            <a href="javascript:;" className="singer_item">韩国女</a>
                            <a href="javascript:;" className="singer_item">韩国组合</a>
                            <a href="javascript:;" className="singer_item">日本男</a>
                            <a href="javascript:;" className="singer_item">日本女</a>
                            <a href="javascript:;" className="singer_item">日本组合</a>
                            <a href="javascript:;" className="singer_item">欧美男</a>
                            <a href="javascript:;" className="singer_item">欧美女</a>
                            <a href="javascript:;" className="singer_item">欧美组合</a>
                            <a href="javascript:;" className="singer_item">乐团</a>
                            <a href="javascript:;" className="singer_item">演奏家</a>
                            <a href="javascript:;" className="singer_item">作曲家</a>
                            <a href="javascript:;" className="singer_item">指挥家</a>
                            <a href="javascript:;" className="singer_item">其他</a>
                        </div>
                        <div className="singer_letter">
                            <a href="javascript:;" className="singer_item singer_first">热门</a>
                            <a href="javascript:;" className="singer_item">A</a>
                            <a href="javascript:;" className="singer_item">B</a>
                            <a href="javascript:;" className="singer_item">C</a>
                            <a href="javascript:;" className="singer_item">D</a>
                            <a href="javascript:;" className="singer_item">E</a>
                            <a href="javascript:;" className="singer_item">F</a>
                            <a href="javascript:;" className="singer_item">G</a>
                            <a href="javascript:;" className="singer_item">H</a>
                            <a href="javascript:;" className="singer_item">I</a>
                            <a href="javascript:;" className="singer_item">J</a>
                            <a href="javascript:;" className="singer_item">K</a>
                            <a href="javascript:;" className="singer_item">L</a>
                            <a href="javascript:;" className="singer_item">M</a>
                            <a href="javascript:;" className="singer_item">N</a>
                            <a href="javascript:;" className="singer_item">O</a>
                            <a href="javascript:;" className="singer_item">P</a>
                            <a href="javascript:;" className="singer_item">Q</a>
                            <a href="javascript:;" className="singer_item">R</a>
                            <a href="javascript:;" className="singer_item">S</a>
                            <a href="javascript:;" className="singer_item">T</a>
                            <a href="javascript:;" className="singer_item">U</a>
                            <a href="javascript:;" className="singer_item">V</a>
                            <a href="javascript:;" className="singer_item">W</a>
                            <a href="javascript:;" className="singer_item">X</a>
                            <a href="javascript:;" className="singer_item">Y</a>
                            <a href="javascript:;" className="singer_item">Z</a>
                            <a href="javascript:;" className="singer_item">#</a>
                        </div>
                    </div>
                    <div className="singerlist">
                        <div className="singer_list">
                            <ul className="singer_list_list">
                                <SingerList />
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        )
       
        
    }
}